<template>
	<view>
		<view @tap="toOpen">
			<slot/>
		</view>
		<uni-popup ref="popup" type="bottom">
			<view class="popup_body" :style="{height:height}" >
				<view class="title">
					<view class="title_left" @tap="$refs.popup.close()">
						<image src="/static/svg/return.svg" mode=""></image>
					</view>
					<view class="title_middle">
						<text>城市选择</text>
					</view>
					<view class="title_right" @tap="confirm">
						<text>确定</text>
					</view>
				</view>
				<view class="choosed">
					<view class="choosed_right">
						<text>已选</text>
						<text style="color:#666;font-size:28rpx;">（{{chooseList.length}}/10）</text>
					</view>
					<view class="choosed_left" >
						<view v-for="(item,index) in chooseList" :key='index' class="ellipsis">
							<text >{{item}}</text>
							<image src="/static/svg/hongcha.svg" mode="" @tap="chooseList.splice(index,1)"></image>
						</view>
					</view>
				</view>
				<view style="display: flex;margin-top: 14rpx;border-top: 1rpx solid #EEEEEE;" :style="{height:chooseBodyHeight}">
					<view class="provinces" >
						<text class="ellipsis" v-for="(item,index) in provinceList" :key='index' :class="{province_choose:provinceChooseIndex==index}" @tap="provinceChoose" :data-index='index'>{{item}}</text>
					</view>
					<view class="citys" >
						<text @tap="toChooseCity" :data-city='item' v-for="(item,index) in cityList" :key='index' :class="{city_choose:chooseList.indexOf(item)!=-1}">{{item}}</text>
					</view>
				</view>
			</view>
		</uni-popup>		
	</view>
</template>

<script>
	import addressList from "@/static/js/address.js"
	import uniPopup from "@/components/uni-popup/uni-popup.vue"
	export default {
		components: {uniPopup},
		data() {
			return {
				height:0,
				width:0,
				choosedHeight:0,
				provinceChooseIndex:0,
				cityList:[],
				chooseList:[]
			};
		},
		props: {
			disabled: {
				type: Boolean,
				default: false
			},
			list:{
				type:Array,
				default(){
					return []
				}
			}
		},
		created() {
			this.height=uni.getSystemInfoSync().windowHeight+'px'
			this.inint(this.provinceChooseIndex)
		},
		computed: {
			chooseBodyHeight() {
				let length=201*uni.getSystemInfoSync().windowWidth/750
				return 'calc(100% - '+(length+this.choosedHeight)+'px)'
			},
			provinceList(){
				let list=[]
				for(let a=0;a<addressList.length;a++){
					list.push(addressList[a].name)
				}
				return list
			}
		},
		watch:{
			'chooseList.length':{
				handler(newValue) {
					this.$nextTick(()=>{
						let query = uni.createSelectorQuery().in(this);
						query.select('.choosed_left').boundingClientRect(data => {
							try{
								this.choosedHeight=data.height 
							}catch(e){
							}
						}).exec()
					})
				}
			},
			'list.length':{
				handler(newValue) {
					let list=JSON.stringify(this.list) 
					this.chooseList=JSON.parse(list)
				},
				immediate: true
			},
			provinceChooseIndex(e){
				this.inint(e)
			}
		},
		methods:{
			toChooseCity(e){
				if(this.chooseList.length>=10){
					return
				}else if(this.chooseList.indexOf(e.currentTarget.dataset.city)!=-1){
					this.chooseList.splice(this.chooseList.indexOf(e.currentTarget.dataset.city),1)
				}else{
					this.chooseList.push(e.currentTarget.dataset.city)
				}
				this.$forceUpdate()
			},
			provinceChoose(e){
				this.provinceChooseIndex=e.currentTarget.dataset.index
			},
			inint(e){
				let  cityList=[]
				for(let a=0;a<addressList[e].list.length;a++){
					if(addressList[e].name.indexOf('市')!=-1){
						for(let c=0;c<addressList[e].list[a].list.length;c++){
							cityList.push(addressList[e].list[a].list[c].name)
						}
					}else if(addressList[e].list[a].name.indexOf('省直辖县级行政区划')!=-1||addressList[e].list[a].name.indexOf('自治区直辖县级行政区划')!=-1){
						for(let c=0;c<addressList[e].list[a].list.length;c++){
							cityList.push(addressList[e].list[a].list[c].name)
						}
					}else{
						cityList.push(addressList[e].list[a].name)
					}
				}
				this.cityList=cityList
			},
			confirm(){
				this.$emit('confirm',this.chooseList)
				this.$refs.popup.close()
			},
			toOpen(){
				if(this.disabled){
					return
				}
				this.$refs.popup.open()
			}	
		}
	}
</script>

<style lang="scss">
.popup_body{
	background-color:#F8F8F8;
}
.title{
	background-color: #fff;
	height: 88rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	view{
		height: 100%;
		width: 25%;
		display: flex;
		align-items: center;
		justify-content: center;
		text{
			font-size:36rpx ;
			line-height: 36rpx;
			color: #333;
			letter-spacing: 1rpx;
		}
	}
	.title_left{
		padding-left:30rpx ;
		justify-content: flex-start;
		image{
			height: 44rpx;
			width:44rpx
		}
	}
	.title_right{
		justify-content: flex-end;
		padding-right: 30rpx;
		text{
			color:#CB4738 ;
			font-size: 34rpx;
			line-height: 34rpx;
		}
	}
}
.choosed{
	margin-top: 38rpx;
	.choosed_right{
		padding-left: 30rpx;
		height: 30rpx;
		display: flex;
		align-items: center;
		text{
			word-break: keep-all;
			font-size: 30rpx;
			line-height: 30rpx;
			letter-spacing: 1rpx;
		}
	}
	.choosed_left{
		margin-top: 30rpx;
		display: flex;
		flex-wrap: wrap;
		font-size: 30rpx;
		padding-left: 30rpx;
		view{
			position: relative;
			height: 54rpx;
			padding: 0 52rpx 0 12rpx;
			background-color: #fff;
			margin: 0 20rpx 16rpx 0;
			border-radius: 6rpx;
			max-width: calc(7.2em + 62rpx);
			font-size: 30rpx;
			color: #CB4738;
			line-height: 54rpx;
			image{
				height: 28rpx;
				width: 28rpx;
				position: absolute;
				right: 12rpx;
				top: 12rpx;
			}
		}
	}
}
.provinces{
	padding-top: 34rpx;
	height: 100%;
	overflow-y: auto;
	text{
		display: block;
		height: 86rpx;
		width: 220rpx;
		font-size: 34rpx;
		color: #333333;
		letter-spacing: 1rpx;
		text-align: center;
		line-height: 86rpx;
	}
	.province_choose{
		background-color:#FFFFFF ;
		font-weight: bold;
	}
}
.citys{
	height: 100%;
	overflow-y: auto;
	display: flex;
	align-items: center;
	flex-flow: column;
	padding-top:40rpx ;
	background-color: #FFFFFF;
	width:530rpx;
	text{
		display: block;
		height: 86rpx;
		width: 450rpx;
		text-align: center;
		line-height: 86rpx;
		font-size:34rpx ;
		color: #666666;
		background-color: #F5F5F5;
		border-radius: 6rpx;
		margin-bottom: 40rpx;
	}
	.city_choose{
		color: #CB4738;
		border: 1rpx solid #CB4738;
		background-color: #FFFFFF;
	}
}
</style>
